<template>
  <div class="activities-container column a-l_c">
    <div class="search-length" v-if="questionType !== -1">
      相关试题 <span>{{ totalQuestion }}</span> 道
    </div>

    <div class="activities-wrapper">
      <!-- 返回按钮 -->
      <div class="back-button" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
        <span>返回</span>
      </div>

      <!-- 标题 -->
      <h1 class="page-title" v-if="questionType== -1">题库列表</h1>

      <el-tabs
        v-if="questionType !== -1"
        v-model="questionType"
        class="demo-tabs"
        @tab-click="handleClickTab"
      >
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="GMAT" name="1"></el-tab-pane>
        <el-tab-pane label="GRE" name="2"></el-tab-pane>
        <el-tab-pane label="EA" name="3"></el-tab-pane>
      </el-tabs>

      <!-- 活动列表 -->
      <div class="question-list" v-loading="loading">
        <div v-for="(item, index) in questionList" :key="index">
          <div class="question-item">
            <div
              class="question-text"
              v-html="mathHTMLToShow(replaceQuestionTitle(item.title))"
            ></div>
            <div class="question-tags">
              <span class="tag">{{ item.type2name }}</span>
            </div>
          </div>
          <el-divider style="margin: 8px 0px" />
        </div>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <Pagination
          :current-page="currentPage"
          :total="totalQuestion"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getQuestionList } from "@/service/exam.js";
import { ref, onMounted } from "vue";
import { ArrowLeft } from "@element-plus/icons-vue";
import { formatDate, handlePath } from "@/utils/index.js";
import Pagination from "@/components/Pagination.vue";
import { useUserStore } from "@/stores/User";
const userStore = useUserStore();
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

// 分页数据
const currentPage = ref(1);
const pageSize = ref(10);
const totalQuestion = ref("");
const loading = ref(false);
const questionType = ref(-1);

const handleClickTab = (tab) => {
  console.log(tab.index)
  questionType.value = tab.index
  fetchActivities()
}

// 活动列表数据
const questionList = ref([]);

// 返回上一页
const goBack = () => {
  if(questionType.value !== -1){
    userStore.searchTitle = ''
  }
  router.back();
};

// 格式化时间
const formatTime = (timestamp) => {
  return formatTimestamp(timestamp, "YYYY-MM-DD HH:mm");
};

// 页码变化处理
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchActivities();
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  fetchActivities();
};

// 获取活动数据
const fetchActivities = () => {
  // // 模拟数据，实际项目中应该调用API
  loading.value = true;
  const params = {
    page: currentPage.value,
    rows: pageSize.value,
    subject: questionType.value == -1 ? handlePath(route.name) : questionType.value,
    title: userStore.searchTitle,
  };
  getQuestionList(params).then((res) => {
    console.log(res, "res");
    questionList.value = res.data.result;
    totalQuestion.value = res.data.totalCount;
    loading.value = false;
  });
};

const goDetail = (id) => {
  // router.push(`/consultDetail/${id}`);
};

onMounted(() => {
  const { type } = route.query;
  questionType.value = type || -1;
  fetchActivities();
});

watch(
  () => route.query.type,
  (val) => {
    questionType.value = val || -1;
    fetchActivities(val);
  }
);
</script>

<style scoped lang="scss">
.activities-container {
  padding: 20px;
  background-color: #ecf4f2;
  min-height: 100vh;

  .search-length {
    width: 1000px;
    margin-bottom: 20px;

    span {
      color: #126983;
      font-weight: bold;
    }
  }
}

.activities-wrapper {
  width: 1000px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.back-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 20px;
  color: #333;

  span {
    margin-left: 5px;
  }

  &:hover {
    color: #126983;
  }
}

.page-title {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  text-align: center;
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .question-item {
    cursor: pointer;

    .question-text {
      font-size: 14px;
      color: #333333;
      margin-bottom: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      transition: all 0.3s ease;

      &:hover {
        color: #126983;
        text-decoration: underline;
      }
    }

    .question-tags {
      display: flex;
      gap: 16px;

      .tag {
        color: #999999;
        font-size: 14px;
      }
    }

    // ... existing styles ...
  }
}
.register-btn {
  width: 100px;
  background-color: #126983;
  border-color: #126983;
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.total-activities {
  color: #666;
}
</style>
